import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import './index.css'

export default class Header extends Component {
    headKeydown = (event) => {

        //解构赋值获取keyCode,target
        const {keyCode,target} = event 

        //判断是否是回车按键
        if(keyCode !== 13) return

        //添加的不能为空
        if(target.value.trim() === ''){
            alert('输入不能为空')
        }
        //准备好一个dataList对象
        const dataList = {id:nanoid(),work:target.value,isright:false}
        //将dataList传递给App
        this.props.addData(dataList)

        //清空
        target.value = ''
        
    }
    render() {
        return (
        <div className="todo-header">
            <input onKeyDown={this.headKeydown} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
        </div>
        )
    }
}
